<template>
  <div :class="{ 'data-box': true, 'data-box-inline': inline, 'data-box-inverse': inverse }">
    <slot name="value" className="data-box-value">
      <div class="data-box-value" :data-suffix="suffix" :style="valueStyle">{{ value }}</div>
    </slot>
    <slot name="label" className="data-box-label">
      <div class="data-box-label" :style="labelStyle">{{ label }}</div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'data-box',
  props: {
    label: { default: undefined },
    value: { default: undefined },
    suffix: { type: String, default: '' },
    color: { default: '#ffffff' },
    inline: { type: Boolean, default: false },
    inverse: { type: Boolean, default: false },
    labelStyle: { type: [Object, String], default: undefined },
    valueStyle: { type: [Object, String], default: undefined },
  },
};
</script>

<style lang="less">
.data-box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  width: 100%;
  background: linear-gradient(0deg, rgba(49, 82, 89, 0.2), rgba(94, 161, 159, 0.6));
  border: 1px solid rgba(0, 104, 183, 0.6);
  border-radius: 5px;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  .data-box-value {
    line-height: inherit;
    text-align: inherit;
    font-size: 36px;
    font-family: Myriad Pro;
    font-weight: bold;
    color: v-bind(color);
    &:after {
      content: attr(data-suffix);
      position: relative;
      left: 0;
      font-size: 50%;
    }
  }
  .data-box-label {
    line-height: inherit;
    text-align: inherit;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #c8e8ff;
  }
  &.data-box-inverse {
    flex-direction: column-reverse;
  }
  &.data-box-inline {
    flex-direction: row;
    .data-box-label,
    .data-box-value {
      display: flex;
      align-items: center;
    }
    &.data-box-inverse {
      flex-direction: row-reverse;
    }
  }
}
</style>
